<template>

<div>
<el-row :gutter="20">
  <el-col :span="6">
    <el-form :inline="true" class="demo-form-inline">
  <el-form-item>
    <el-input v-model="name" placeholder="档案号/姓名/手机号"></el-input>
  </el-form-item>
 
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>

   </el-form>

    </el-col>
</el-row>
<el-container>
  <el-button class="el-icon-circle-plus" size="mini" type="primary" @click="addEmp()">添加</el-button>
  <el-button class="el-icon-delete" size="mini" type="danger" @click="deleteAll()">批量删除</el-button>
</el-container>
 
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="档案号"
      width="190">
      <template slot-scope="scope">{{ scope.row.filenumber }}</template>
    </el-table-column>
    
    <el-table-column
      prop="name"
      label="姓名"
      width="190">
    </el-table-column>
    <el-table-column
      label="性别"
      width="190">
      <template slot-scope="scope">  <span v-if="scope.row.sex==1">男</span><span v-if="scope.row.sex==0">女</span> </template>
    </el-table-column>
     <el-table-column
      prop="age"
      label="年龄"
      width="190">
    </el-table-column>

   <!--   <el-table-column
      label="健康管理师"
      width="190">
      <template slot-scope="scope">{{ scope.row.thealthmgr.healthMgrName }}</template>
    </el-table-column> -->

  
   <el-table-column
      prop="phonenumber"
      label="手机号"
      width="190">
    </el-table-column>

    <el-table-column
      prop="regtime"
      label="注册时间"
      width="190">
    </el-table-column>


     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        
      </template>
    </el-table-column>
  </el-table>

        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 4, 6]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


     <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
    
      <el-tabs type="border-card">
  <el-tab-pane label="基本信息">
        <el-form ref="form1" :model="form" :rules="rules"   label-width="80px">


          <el-row :gutter="20">
  <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="档案号:">
    <el-input v-model="form.dangan" :disabled="true"></el-input>
    </el-form-item>
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
     <el-form-item label="身份证:">
    <el-input @blur="sfz()" v-model="form.sfz"></el-input>
    </el-form-item>
    
  </div></el-col></el-row>


  <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="登录密码:">
    <el-input v-model="form.mima" show-password></el-input>
    </el-form-item>
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
     <el-form-item label="手机号:">
    <el-input @blur="shouji()" v-model="form.shouji"></el-input>
    </el-form-item>
    
  </div></el-col></el-row>


  <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="姓名:" prop="xingming">
    <el-input v-model="form.xingming"></el-input>
    </el-form-item>
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="性别:">
          <el-radio-group v-model="form.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
    
  </div></el-col></el-row>


  <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
      <el-form-item label="籍贯:">
    <el-input v-model="form.gji"></el-input>
    </el-form-item>

     <el-form-item label="邮箱:">
    <el-input v-model="form.youx"></el-input>
    </el-form-item>

    
    
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="年龄:">
    <el-input @blur="nianl" v-model="form.nianl"></el-input>
    </el-form-item>

     <el-form-item label="出生日期:">
    <el-date-picker  :picker-options="pickerOptions1" 
    start-placeholder="请选择执行开始时间"
     value-format="yyyy-MM-dd" 
      type="date"
       placeholder="选择日期" 
        v-model.trim="form.birthday" 
       style="width: 100%;"></el-date-picker>
    </el-form-item>
    
  </div></el-col></el-row>


  <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="婚姻状态:">
    <el-input v-model="form.hy"></el-input>
    </el-form-item>
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="注册时间:">
       <el-date-picker :picker-options="pickerOptions"  
            start-placeholder="请选择执行开始时间"
             value-format="yyyy-MM-dd"  
             type="date" 
             placeholder="选择日期" 
            v-model.trim="form.zhuc" 
             style="width: 100%;"></el-date-picker>
  
    </el-form-item>
    
  </div></el-col></el-row>

  <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="职业:">
    <el-input v-model="form.zy"></el-input>
    </el-form-item>
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
      <el-form-item label="文化程度:">
    <el-input v-model="form.wenhua"></el-input>
    </el-form-item>
    
  </div></el-col></el-row>


    <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
       <!-- <el-form-item label="健康管理师:"> -->

    <!--  <el-select v-model="form.tid">
            <el-option value=1001 label="启用"></el-option>
            <el-option value=1002 label="禁用"></el-option>
          </el-select> -->

   <!--  <el-select v-model="form.tid">
          <el-option v-for="(item,index) in health" :key="index" :label="item.healthMgrName" :value="item.healthMgrId"  >
													
					</el-option>
        </el-select>
         -->
  <!--   </el-form-item> -->
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
        <!-- <el-form-item label="档案状态:">

     <el-select v-model="form.dtid">
            <el-option value=1 label="启用"></el-option>
            <el-option value=0 label="禁用"></el-option>
          </el-select>
    </el-form-item> -->
    
  </div></el-col></el-row>


    <el-form-item label="备注">
    <el-input type="textarea" v-model="form.bezhu"></el-input>
  </el-form-item>

      </el-form>
  </el-tab-pane>




  <el-tab-pane label="动态信息">

        <el-tabs type="border-card">
      <el-form ref="form" :model="dongtai"  label-width="80px">
 <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
        <el-form-item label="身高:">
    <el-input @blur="shengao()" v-model="dongtai.shengao" type="text"></el-input>
    </el-form-item>
    
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
          <el-form-item label="体重:">
    <el-input @blur="tiz()" v-model="dongtai.tiz"></el-input>
    </el-form-item>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
   
          <el-form-item label="舒张压:">
    <el-input @blur="szy()"  v-model="dongtai.szy"></el-input>
    </el-form-item>
  
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
       <el-form-item label="收缩压:">
    <el-input @blur="ssy()" v-model="dongtai.ssy"></el-input>
    </el-form-item>
  

    </div></el-col>
</el-row>


<el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="呼吸:">
    <el-input @blur="huxi()"  v-model="dongtai.huxi"></el-input>
    </el-form-item>
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="体温:">
    <el-input @blur="tiwen()" v-model="dongtai.tiwen"></el-input>
    </el-form-item>
    
  </div></el-col></el-row>


  <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
    <el-form-item label="腰围:">
    <el-input @blur="yaowei()" v-model="dongtai.yaowei"></el-input>
    </el-form-item>
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">

    
  </div></el-col></el-row>


  <el-row :gutter="20">
   <el-col :span="12"><div class="grid-content bg-purple">
  
    </div>
    
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple">
  
    
  </div></el-col></el-row>


     


      </el-form>

</el-tabs>

  </el-tab-pane>



  





  <el-tab-pane label="病史">
       <el-tabs type="border-card">
      <el-form ref="form" :model="dongtai" label-width="80px">
 <el-form-item label="既往史">
    <el-input type="textarea" v-model="dongtai.jws"></el-input>
  </el-form-item>
   <el-form-item label="家族史">
    <el-input type="textarea" v-model="dongtai.jzs"></el-input>
  </el-form-item>
   <el-form-item label="过敏史">
    <el-input type="textarea" v-model="dongtai.gms"></el-input>
  </el-form-item>
   <el-form-item label="病史">
    <el-input type="textarea" v-model="dongtai.bings"></el-input>
  </el-form-item>
   <el-form-item label="慢性病">
    <el-input type="textarea" v-model="dongtai.mxb"></el-input>
  </el-form-item>
 <el-form-item>
          <el-button type="primary" @click="updateAndAdd()">确定</el-button>
          <el-button  @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>

              </el-form>

</el-tabs>
  </el-tab-pane>
</el-tabs>
    </el-dialog>

 <!--  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div> -->
  </div>
</template>


  

<script>
import axios from 'axios';

  export default {
    data() {
      return {
         pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      listLoading: false,
         pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      listLoading: false,

        health:[],
        value:"",
        ss:"",
        sex:1,
        bt:"",
        bj:'',
        tableData: [],
        name:"",
        did:"0",
        currentPage4: 1, //当前页
        num:4,  //每页条数
        total:0,
        numshu:1,
     
        dongtai:{
          dtid:"",
          shengao:"",
          tiz:"",
          szy:"",
          ssy:"",
          huxi:"",
          tiwen:"",
          yaowei:"",
          biwei:"",
          bml:"",
          jws:"",
          jzs:"",
          gms:"",
          bings:"",
          mxb:"",
          tMemberId:""
        },
        form: {
          gji:"",
          wenhua:"",
            hy:"",
            zy:"",
            zhuc:"",
            mingzu:"",
            sfz:"",
            mima:"",
            shouji:"",
            xingming:"",
            sex:"",
            nianl:"",
            birthday:"",
            youx:"",
            zye:"",
            tid:"",
            bezhu:"",
            updateid:""
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
         rules: {
          xingming: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          }
      }
    },
    methods: {
     
       resetForm(from) {
        this.$refs[from].resetFields();
      },
      addEmp(){
  
     
        this.dialogFormVisible = true
        this.form={}
        this.dongtai={}
           this.bj="false"

      },
      deleteAll(){
        let ids=[]
        let  ss =[]
          this.multipleSelection.forEach(item => {
           ids.push(item.filenumber)
          });
          console.log(ids)
          console.log(ss)
          axios.get("/api/selectTorder?id="+ids).then(data=>{
            console.log(data.data)
               data.data.forEach((element) => {
                  ss.push(element.orderstatus)
               });


                 if(ss.includes("1") && ss.includes("0")){
                 alert("里面已经有预约过的不能删除")
                  
               }else 

               if(ss.includes("1")){
                 alert("取消预约在删除")
                 
               }else 
            if(ss.includes("0")){
              console.log(ids)
                   axios.get("/api/TmemberAllDel?id="+ids).then(data=>{
             if(data.data==true){
                    alert("删除成功")
                    this.getEmpList()
             }
          })
               } else{
            
  axios.get("/api/TmemberAllDel?id="+ids).then(data=>{
             if(data.data==true){
                    alert("删除成功")
                    this.getEmpList()
             }
          })
               
               } 
          })
      
          
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      updateAndAdd(){
        this.$refs.form1.validate((valid) => {
          if (valid) {
             if(this.bj=='true'){
            
          
                     axios.get("/api/TMemberUpdate",{
              params:{
               filenumber:this.form.dangan,
                name:this.form.xingming,
               sex:this.form.sex,
                 idcard:this.form.sfz,
                password:this.form.mima,
                phonenumber:this.form.shouji,
               email:this.form.youx,
                 age:this.form.nianl, 
                   regtime:this.form.zhuc,
                birthday:this.form.birthday, 
                 mtid:this.form.tid, 
                remark:this.form.bezhu   
            }}).then(data=>{
                  this.$message({
                        type: 'success',
                        message: '修改成功!'
                     });
                    this.dialogFormVisible = false
                
                    this.getEmpList()
                
            })
  
         
    
               axios.get("/api/TMemberDynamicinfoUpdate",{params:{
                 tMemberId:this.form.dangan,
                height:this.dongtai.shengao,
                weight:this.dongtai.tiz,
                dbp:this.dongtai.szy,
                sbp:this.dongtai.ssy,
                breth:this.dongtai.huxi,
                thermometer:this.dongtai.tiwen,
                waistline:this.dongtai.yaowei,
                 previousHistory:this.dongtai.jws,
                 familyHistory:this.dongtai.jzs,
                 allergicHistory:this.dongtai.gms,

                 medicalHistory:this.dongtai.bings,
                 chronicDisease:this.dongtai.mxb,
                maritalStatus:this.form.hy,
                 job:this.form.zy,
                 educationDegree:this.form.wenhua,
                 nativePlace:this.form.gji,
                 health_mgr_id:this.form.tid,
                 status:this.form.dtid
            }}).then(data=>{
               
                  this.$message({
                        type: 'success',
                        message: '修改成功!'
                     });
                    this.dialogFormVisible = false
                    this.getEmpList()
                
            }) 
          }else{
            
            
            axios.get("/api/TMemberAdd",{

              
              params:{
                name:this.form.xingming,
               sex:this.form.sex,
                 idcard:this.form.sfz,
                password:this.form.mima,
                phonenumber:this.form.shouji,
                email:this.form.youx,
                 age:this.form.nianl,
                  regtime:this.form.zhuc,
                birthday:this.form.birthday, 
                 mtid:this.form.tid, 
                remark:this.form.bezhu    
            }}).then(data=>{
                  this.$message({
                        type: 'success',
                        message: '添加成功!'
                     });
                    this.dialogFormVisible = false
                if(data.data==true){
                   axios.get("/api/TMemberDynamicinfoAdd",{params:{
                height:this.dongtai.shengao,
                weight:this.dongtai.tiz,
                dbp:this.dongtai.szy,
                sbp:this.dongtai.ssy,
                breth:this.dongtai.huxi,
                thermometer:this.dongtai.tiwen,
                waistline:this.dongtai.yaowei,
               previousHistory:this.dongtai.jws,
                 familyHistory:this.dongtai.jzs,
                 allergicHistory:this.dongtai.gms,
                 medicalHistory:this.dongtai.bings,
                 chronicDisease:this.dongtai.mxb,
                 chronicDisease:this.dongtai.mxb,
                maritalStatus:this.form.hy,
                 job:this.form.zy,
                 educationDegree:this.form.wenhua,
                 nativePlace:this.form.gji,
                //  healthMgrId:this.form.tid,
                 status:this.form.dtid
            }}).then(data=>{
               
                  this.$message({
                        type: 'success',
                        message: '添加成功!'
                     });
                    this.dialogFormVisible = false
                    this.getEmpList()
                
            }) 
                }
                    this.getEmpList()
                
            })
        
          } 
          } else {
            console.log('error submit!!');
            return false;
          }
        });
           
      },
      handleEdit(index, row) {
        this.bj='true'
       
        this.dialogFormVisible = true
   
          this.form.dangan=row.filenumber
          this.form.xingming=row.name
          this.form.sfz=row.idcard
          this.form.mima=row.password
          this.form.sex=row.sex
          this.form.shouji=row.phonenumber
          this.form.youx=row.email
          this.form.nianl=row.age
          this.form.birthday=row.birthday
          this.form.zhuc=row.regtime
          // this.form.tid=row.mtid
          this.form.bezhu=row.remark

    axios.get("/api/TMemberExaminationByidAll",{params:{id: this.form.dangan}}).then(data=>{
            console.log(data.data)
            this.dongtai.shengao=data.data.height
            this.dongtai.tiz=data.data.weight
            this.dongtai.szy=data.data.dbp
            this.dongtai.ssy=data.data.sbp
            this.dongtai.huxi=data.data.breth
            this.dongtai.tiwen=data.data.thermometer
            this.dongtai.yaowei=data.data.waistline
            this.dongtai.jws=data.data.previousHistory
            this.dongtai.jzs=data.data.familyHistory
            this.dongtai.gms=data.data.allergicHistory
            this.dongtai.bings=data.data.medicalHistory
            this.dongtai.mxb=data.data.chronicDisease
            this.form.zy=data.data.job
            this.form.hy=data.data.maritalStatus
            this.form.wenhua=data.data.educationDegree
            this.form.gji=data.data.nativePlace
            this.form.dtid=data.data.status
      })
  
      },
      handleDelete(index,table,row) {
        //建议使用静态删除 data.splice(index,1)
       
        console.log(index, row);
         this.$confirm('确定删除此员工吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        /*   axios.get("/api/removeEmp",{params:{"id":row.id}}).then(data=>{
                if(data.data==true){
                  table.splice(index,1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                     });
                }
            })  */
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
       onSubmit() {
         this.getEmpList()
      },
      getEmpList(){
              axios.get("/api/TmemberAllList",{params:{"page":this.currentPage4,"num":this.num,"name":this.name}}).then(data=>{
                console.log(data.data)
              this.tableData=data.data.rows  //获取分页数据
              this.total=data.data.total     //获取总记录数

               setTimeout(() => {
          this.loading=false;
        }, 1000);
      })
      },
   
      handleSizeChange(val) {
        console.log("数据"+val)
        this.num=val
      
       this.getEmpList()
      },
      handleCurrentChange(val) {
        console.log("当前页"+val)
        this.currentPage4=val
        this.getEmpList()
         
        },
      shengao() {

		var regs = /^\d{2,}$/;
		if(regs.test(this.dongtai.shengao)) {
     
			return true;
		} else {
       this.$message('只能输入数字');
			return false;
		}
	},
  tiz(){
    	var regs = /^\d{2,}$/;
		if(regs.test(this.dongtai.tiz)) {
			return true;
		} else {
        this.$message('只能输入数字');
			return false;
		}
	},
  szy(){
var regs = /^\d{2,}$/;
		if(regs.test(this.dongtai.szy)) {
			return true;
		} else {
        this.$message('只能输入数字');
			return false;
		}
  },
  ssy(){
var regs = /^\d{2,}$/;
		if(regs.test(this.dongtai.ssy)) {
			return true;
		} else {
        this.$message('只能输入数字');
			return false;
		}
  
  },

  huxi(){
    var regs = /^\d{2,}$/;
		if(regs.test(this.dongtai.huxi)) {
			return true;
		} else {
  this.$message('只能输入数字');			return false;
		}
   
  },
tiwen(){
 var regs = /^\d{2}.\d{1,}$/;
		if(regs.test(this.dongtai.tiwen)) {
			return true;
		} else {
        this.$message('只能输入数字');
			return false;
		}
   
},
  yaowei(){
    var regs = /^\d{2,}$/;
		if(regs.test(this.dongtai.yaowei)) {
			return true;
		} else {
          this.$message('只能输入数字');
			return false;
		}
  },
  shouji(){
     var regs = /^\d{11}$/;
		if(regs.test(this.form.shouji)) {
			return true;
		} else {
         this.$message('只能输入11数字');
			return false;
		}
  },
  sfz(){
     var regs = /^\d{18}$/;
		if(regs.test(this.form.sfz)) {
			return true;
		} else {
          this.$message('身份证只能输入18位');
			return false;
		}
  },
  nianl(){
       var regs = /^\d{2}$/;
		if(regs.test(this.form.nianl)) {
			return true;
		} else {
        this.$message('只能输入2位');
			return false;
		}
  }


  
  
  },
      created(){
        this.getEmpList()
              axios.get("/api/t_healthmgrAllList").then(data=>{
                this.health=data.data;
                console.log(this.health)
                       
     
      })
         
    
           
      }
  }
</script>